<template>
  <div id="app">
    <!-- 功能组件 -->
    <keep-alive>
      <router-view ref="views"></router-view>
    </keep-alive>

    <!-- 底部导航 -->
    <van-tabbar id="bottom-tabber" active-color="#000" inactive-color="#000">
      <van-tabbar-item icon="label-o" name="nav-menu" @click="isShowLeftmenu = !isShowLeftmenu">
        菜单
      </van-tabbar-item>

      <van-tabbar-item icon="setting-o" name="nav-setting" @click="onSetting">
        设置
      </van-tabbar-item>
    </van-tabbar>

    <!-- 侧边栏菜单 -->
    <van-popup class="left-menu" v-model="isShowLeftmenu" position="left" style="height: 100%;width:150px">
      <van-sidebar v-model="menukey" @change="onLefeMenuChange">
        <van-sidebar-item>
          <van-icon slot="title" name="search"><span>刻印查询</span></van-icon>
        </van-sidebar-item>

        <van-sidebar-item>
          <van-icon slot="title" name="points" :badge="myCalcNumText"><span>搭配计算</span></van-icon>
        </van-sidebar-item>

        <van-sidebar-item>
          <van-icon slot="title" name="completed" :badge="myCompareNumText"><span>搭配对比</span></van-icon>
        </van-sidebar-item>

        <van-sidebar-item>
          <van-icon slot="title" name="like-o" :badge="myFavoritedNumText"><span>我的收藏</span></van-icon>
        </van-sidebar-item>

        <van-sidebar-item>
          <van-icon slot="title" name="friends-o"><span>我的队伍</span></van-icon>
        </van-sidebar-item>

        <van-sidebar-item>
          <van-icon slot="title" name="guide-o"><span>角色速查</span></van-icon>
        </van-sidebar-item>

        <van-sidebar-item>
          <van-icon slot="title" name="setting-o"><span>设置</span></van-icon>
        </van-sidebar-item>
      </van-sidebar>
    </van-popup>
  </div>
</template>

<script>
import Context from './server/context';
import { ContextServer, SearchServer, CalcServer } from './server/servers';
import { Toast, Notify } from 'vant';

export default {
  name: 'skyeye_engrave',
  components: {},

  watch: {
  },

  computed: {
    affixList() {
      return this.$store.state.affixList;
    },

    affixOptions() {
      return this.$store.state.affixOptions;
    },

    compare_list() {
      return this.$store.state.compare_list;
    },

    calc_list() {
      return this.$store.state.calc_list;
    },

    favorited_list() {
      return this.$store.state.favorited_list;
    },

    myCalcNumText() {
      if (this.calc_list instanceof Array) {
        if (this.calc_list.length == 0) {
          return "";
        } else if (this.calc_list.length > 80) {
          return "80+";
        } else {
          return this.calc_list.length + "";
        }
      } else {
        return '';
      }
    },

    myCompareNumText() {
      if (this.compare_list instanceof Array) {
        if (this.compare_list.length == 0) {
          return "";
        } else if (this.compare_list.length > 80) {
          return "80+";
        } else {
          return this.compare_list.length + "";
        }
      } else {
        return '';
      }
    },

    myFavoritedNumText() {
      if (this.favorited_list instanceof Array) {
        if (this.favorited_list.length == 0) {
          return "";
        } else if (this.favorited_list.length > 80) {
          return "80+";
        } else {
          return this.favorited_list.length + "";
        }
      } else {
        return '';
      }
    }
  },

  data() {
    return {
      isShowLeftmenu: false,
      menukey: 0,
    }
  },

  created() {
    let vm = this;
    console.log("当前数据库环境:", Context.environment);

    // 给servers.js初始化时间 2秒后开始检查更新
    setTimeout(() => {
      ContextServer.checkUpdate(vm.getCheckUpdateResult);
    }, 2000)
  },

  methods: {

    queryInitDatas() {
      // 查询affixlists
      // 设置affixOptions
      let affixList = SearchServer.queryAllAffixs()
      this.$store.commit('setAffixList', affixList);
      console.log("所有词条", this.$store.state.affixList, this.$store.state.affixOptions);

      let favorited = CalcServer.queryAllFavorites();
      this.$store.commit("syncFavoritedList", favorited);

    },
    getCheckUpdateResult(data) {
      console.log('getCheckUpdateResult', data);
      /*后端直接处理好了 这里只接收一个反馈*/
      /*data={
        code: 0正常 1需要更新  2更新结束 3错误
        data:{}  一些额外的信息
        message:  错误消息，弹窗提示
        title:    本地title  (数据库版本、是否有程序更新)
      } */

      if (data.code == 0 || data.code == 4) {
        //正常
        //修改title
        document.title = `刻印查询工具${data.title}`;
        console.log("无须更新");

        //继续加载数据
        this.queryInitDatas();

      } else if (data.code == 1) {
        //后台更新中
        document.title = `刻印查询工具${data.title}`;
        console.log("开始更新");

        //弹出遮罩层阻止进一步操作
        Toast({
          message: '正在更新数据库，请勿关闭程序',
          position: 'top',
          type: 'loading',
          overlay: true,
          duration: 0
        });

      } else if (data.code == 2) {
        //后台更新完成
        console.log("更新结束");
        document.title = `刻印查询工具${data.title}`;

        //停顿一秒再提示 防止闪眼
        setTimeout(() => {
          Toast.clear();
          Notify({ type: 'success', message: '\n更新完成', duration: 2000 });

          //继续加载数据
          this.queryInitDatas();
        }, 1000);

      } else if (data.code == 3) {
        ///更新错误
        console.log("更新出错");
        setTimeout(() => {
          Toast.clear();
          Toast({
            message: '更新错误,请重启应用,' + data.message,
            position: 'top',
            type: 'loading',
            overlay: true,
            duration: 0
          });
        }, 1000);
      }
    },

    onLefeMenuChange(index) {
      console.log('onLefeMenuChange', index);
      switch (index) {
        case 0: //刻印查询
          this.$router.push('/Search')
          break;

        case 1: //搭配计算
          this.$router.push('/Calc')
          break;

        case 2: //搭配对比
          this.$router.push('/Compare')
          break;

        case 3: //我的收藏
          this.$router.push('/MyFavorite')
          break;

        case 4: //我的队伍
          this.$router.push('/MyTeam')
          break;

        case 5: //角色速查
          this.$router.push('/Load')
          break;

        case 6: //设置
          this.$router.push('/MySetting')
          break;
      }

      this.isShowLeftmenu = false;
    },

    onSetting() {
      this.$router.push('/MySetting')
    }
  },
}
</script>

<style scoped>
.container {
  height: 750px;
  overflow: hidden;
}

.van-tabbar {
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.left-menu .van-sidebar {
  width: 150px;
}

.left-menu .van-sidebar .van-sidebar-item {
  width: 150px;
}

.left-menu .van-icon {
  font-size: 20px;
}

.left-menu .van-icon span {
  position: relative;
  display: inline-block;
  top: -2px;
  padding-left: 2px;
  font-size: 15px;
  height: 20px;
  line-height: 20px;
}
</style>

<!-- 全局样式 -->
<style>
.wrapper {
  height: 750px;
  overflow: hidden;
}

.border-left {
  border-left: 1px solid rgb(235, 237, 240);
}

.border-right {
  border-right: 1px solid rgb(235, 237, 240);
}

.border-top {
  border-top: 1px solid rgb(235, 237, 240);
}

.border-bottom {
  border-bottom: 1px solid rgb(235, 237, 240);
}

.border-all{
  border: 1px solid rgb(235, 237, 240);
}

.font-left {
  text-align: left !important;
}

.font-center {
  text-align: center !important;
}

.float-left{
  float: left;
}

.float-right{
  float: right;
}

.margin-auto {
  margin: 0 auto !important;
}

.margin-top {
  margin-top: 10px;
}

.margin-top-small {
  margin-top: 5px;
}

.margin-top-more {
  margin-top: 20px;
}

.margin-bottom {
  margin-bottom: 10px;
}

.van-divider {
  margin: 10px 0 !important;
}

.mouse-point{
  cursor: pointer !important;
}

.color-blue{
  color:rgb(59, 59, 189);
}

.underline{
  text-decoration:underline;
}

.coler-blue-underline{
  color:rgb(59, 59, 189);
  text-decoration:underline;
}

.position-relative{
  position: relative;
}

.position-absolute{
  position: absolute;
}

.van-button--plain.van-button--warning {
  color: #FFA500 !important;
  border-color: #FFA500 !important;
}

.width-100{
  width: 100%;
}

/* 滚动条样式 */
*::-webkit-scrollbar {
  width: 10px;
  border-radius: 100px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(172, 171, 171, 0.393);
}

*::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>